<template>
  <div id="BatchImportPayrollCard">
    <el-dialog title="工资卡批量导入" :visible="visible" :before-close="handleClose" @open="handleOpen" width="550px">
      <div class="uploadForm">
        <el-upload class="uploadContent" accept=".xls,.xlsx" :show-file-list="false" :multiple="false" :auto-upload="false" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handelFileChange">
          <el-input :placeholder="uploadFile?uploadFile.name:'请选择文件..'" ref="uploadInput" @focus="handleFocus"></el-input>
          <el-button >浏览文档</el-button>
        </el-upload>
        <el-link type="primary" :underline="false" :href="templateUrl">下载模板</el-link>
      </div>
      <div class="tips">
        <p>1.请使用标准模板进行导入，完善工资卡数据即可，方便不易出错</p>
        <p>2.请注意文件导入要求</p>
        <p>1）不支持复合表头</p>
        <p>2）只能导入系统已有员工的工资卡数据</p>
        <p>3）工资卡项目需要和表中设置的保持一致，不能删除与更改，否则不能识别</p>
        <!-- <p>4）重名员工，请填写工号，否则不能识别</p> -->
      </div>
      <div slot="footer">
        <el-button  type="primary" @click="handleImport">导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'BatchImportPayrollCard',
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      templateUrl: '',
      uploadFile: null
    }
  },
  methods: {
    importTemplate() {

      let formData = new FormData();
      formData.append('formFile', this.uploadFile);
      this.$api.payrollCredit
        .ExcelIntCredit(formData)
        .then(res => {
          console.log(res);
          if (res.data.status == 200) {
            this.handleClose();
            this.$emit('search', true);
            this.$message.success(res.data.data);
          } else {
            this.$message.warning(res.data.message);
          }
        })
    },
    handleOpen() {

    },
    handleClose() {
      this.uploadFile = null;
      this.$emit('update:visible', false);
    },
    handelFileChange(file) {
      this.uploadFile = file.raw;
    },
    handleImport() {
      if (this.uploadFile) {
        this.importTemplate();
      } else {
        this.$message.warning('请选择要导入的文件');
      }
    },
    handleFocus() {
      this.$refs.uploadInput.blur();
    }
  },
  mounted() {
    this.templateUrl = this.$api.payrollCredit.templateUrl;
  }
}
</script>
<style lang="less" scoped>
#BatchImportPayrollCard {
  .uploadForm {
    display: flex;
    margin: 30px 0;
    .uploadContent {
      :deep(.el-upload) {
        display: flex;
        & > * {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>